<template>
  <vc-dialog v-model="showValue" v-click-outside="clickOverlay" title="募集资金投向" width="500"
             @close="handleClose">
    <div class="main" v-if="showValue">
      <div ref="chartRef" class="chart"></div>
      <div class="dataDesc">
        <div
          v-for="(item, index) in echartsData.projectFundRateList"
          :key="index"
          class="dataDescItem"
        >
          <div class="label">{{ item.projectName }}</div>
          <div class="value">{{ item.rate }}</div>
        </div>
      </div>
    </div>
  </vc-dialog>
</template>

<script lang="ts" setup>
import {emptyHandle} from '@vc/utils';
import * as echarts from 'echarts';


interface Props {
  /** 是否显示 */
  show: boolean;
  /** 弹窗数据 */
  echartsData?: Record<string, any>;
}

const {echartsData = {}, show} = defineProps<Props>();
const option = {
  tooltip: {
    trigger: "item",
    formatter: function (param) {
      let item = param.data;
      var html = `<div style="width:300px;white-space:initial;"><div >投资项目：${item.name}</div>
                    <div>投资金额：${item.value}亿</div>
                    <div>占比：${item.rate}</div></div>`;
      return html;
    },
    position: function (point, params, dom, rect, size) {
      //  size为当前窗口大小
      if (size.viewSize[0] / 2 >= point[0]) {
        //其中point为当前鼠标的位置,在左侧
        return [point[0], point[1]];
      } else {
        //其中point为当前鼠标的位置
        return [point[0] - size.viewSize[0] / 2, point[1]];
      }
    },
  },
  color: ["#3986FE", "#F26279", "#F9D237", "#35CACA"],
  series: [
    {
      type: "pie",
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
        // position: 'center'
      },
      hoverAnimation: false,
      emphasis: {
        label: {
          show: false,
          fontSize: "12",
          fontWeight: "bold",
        },
      },
      labelLine: {
        show: false,
      },
      width: 150,
      center: ["50%", "50%"],
      data: [],
    },
  ],
}
const showValue = computed({
  get() {
    return show;
  },
  set(value) {
    emit('update:show', value);
  }
});
const chartRef = ref();
watch(() => echartsData, (nv) => {
  nextTick(() => {
    let chart1 = echarts.init(chartRef.value);
    let pieData: any = [];
    nv.projectFundRateList.forEach((item) => {
      pieData.push({
        value: item.amountForProjectDisplay,
        name: item.projectName,
        rate: item.rate,
      });
    });
    let myOption = Object.assign({}, option);
    myOption.series[0].data = pieData;
    chart1.setOption(myOption);
  })
})


const emit = defineEmits(['update:show']);

const handleClose = () => {
  emit('update:show', false);
};

function clickOverlay() {
  emit('update:show', false);
}
</script>
<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px;

  .chart {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
  }

  .dataDescItem {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    margin-left: 20px;
    line-height: 22px;
    .label {
      color: #8b8c8c;
    }

    .value {
      color: #111111;
      flex-shrink: 0;
      margin-left: 20px;
    }
  }
}
</style>
